import React, { useState, useImperativeHandle, MutableRefObject } from 'react'
import type { FC } from 'react'
import styles from './index.module.less'
import { Button, Mask, Space, Swiper, Avatar } from 'antd-mobile'
import Icon from '@/components/Icons'
import CommentList from '@/components/CommentList'
import CommentInput from '@/components/CommentInput'
import { useStore } from '@/store'
interface IDetailProp {
  mRef: MutableRefObject<{ open: (detailId: string) => void } | undefined>
}
const DetailPage = (props: IDetailProp) => {
  const avatar = useStore(state => state.avatar)
  const userInfo = useStore(state => state.userInfo)
  const [visible, setVisible] = useState(false)
  const open = (detailId: string) => {
    console.log('detailId', detailId)
    setVisible(true)
  }
  const close = () => {
    setVisible(false)
  }
  useImperativeHandle(props.mRef, () => {
    return {
      open
    }
  })
  const colors = ['#ace0ff', '#bcffbd', '#e4fabd', '#ffcfac']
  const items = colors.map((color, index) => (
    <Swiper.Item key={index}>
      <div className={styles.swiperItem} style={{ background: color }}>
        {index + 1}
      </div>
    </Swiper.Item>
  ))
  return (
    <>
      <div className={styles.detailPage}>
        <Mask visible={visible} onMaskClick={() => close()}>
          <div className={styles.content}>
            {/* 顶部 */}
            <div className={styles.authorWrapper} onClick={() => close()}>
              <Icon iconName='icon-guanbi' />
              <div className={styles.authorInfo}>
                <Avatar style={{ '--border-radius': '50%', '--size': '40px' }} src={avatar} />
                <span>{userInfo.userName}</span>
              </div>
              <div className={styles.button}>
                <Button block shape='rounded' color='danger' size='small'>
                  关注
                </Button>
              </div>
            </div>
            <div className={styles.scrollWrapper}>

            {/* 轮播图 */}
            <div className={styles.swiperWrapper}>
              <Swiper
                style={{
                  '--track-padding': ' 0 0 16px'
                }}
              >
                {items}
              </Swiper>
            </div>
            {/* 正文 */}
            <div className={styles.noteWrapper}>
              <div className={styles.noteContent}>
              <div className={styles.noteTitle}>成都“限摩”会有变动吗？成都交警回应</div>
              <div className={styles.noteDesc}>
                <span className={styles.noteText}>
                  近日，有网友在麻辣社区留言提问，“成都市《关于摩托车交通秩序管理的通告》发布于2022年，有效期3年，将于2025年8月中旬到期，后续成都会不会对其作出调整？”
                  4月21日，成都交警回应，《关于摩托车交通秩序管理的通告》（以下简称“《通告》”）于2022年8月15日面向社会发布，目前仍在有效期内，关于《通告》到期后的管理措施，目前正在研究中，并将按照相关程序审定后对外发布。
                  ﻿
                </span>
              </div>
              </div>
              <div className={styles.noteArea}>
                04-21 四川
              </div>
            <div className={styles.divider}>
                <div className={styles.border}></div>
            </div>
            </div>
            {/* 评论区 */}
            <div className={styles.commentList}>
            <CommentList />
            
            </div>
            </div>
            <div className={styles.commentInput}>
              <CommentInput />
            </div>
          </div>
        </Mask>
      </div>
    </>
  )
}
export default DetailPage
